<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="1328px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 公告详情
  .modal-content
    .content-title {{detail.title}}
    .content-info
      .content-info-people 发布人：{{detail.fromUserName}}
      .content-info-time 发布时间：{{detail.createDate}}
      .content-info-group 接收人员：{{detail.receiveType}}
    .content-detail(v-html="detail.content")
    .content-file
      .content-file-label 文件附件下载
      .content-file-bd
        a.file-name(v-for="item in detail.fileList", :href="item.fileUrl" download="w3logo") {{item.fileName}}
  .modal-footer(slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="handleClose") 确定
</template>

<script>
import { getNoticeDetail } from 'api'
export default {
  name: 'noticeDialog',
  props: {
    show: Boolean,
    item: Object
  },
  data () {
    return {
      detail: {
        fileList: []
      }
    }
  },
  methods: {
    async beforeOpen () {
      try {
        const { ResultSet } = await this.$axios.post(getNoticeDetail, { content: { messageId: this.item.messageId, type: 1 } })
        this.detail = ResultSet.userData
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    handleClose () {
      this.$emit('close')
    }
  }
} 
</script>

<style lang="scss" scoped>
.content-title {
  position: relative;
  padding-left: 12px;
  font-weight: bold;
  font-size: 22px;
  color: #3E4373;
  margin-top: 16px;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    background: #8676FF;
  }
}
.modal-content {
  max-height: 500px;
  overflow-y: auto;
}
.content-info {
  margin-top: 24px;
  padding: 17px 24px;
  background: #F6F6F9;
  border-radius: 6px;
  font-size: 14px;
  line-height: 22px;
  color: #8B8EAB;
  display: flex;
  align-items: center;
}
.content-info-people {
  margin-right: 24px;
}
.content-info-time {
  margin-right: 24px;
}
.content-detail {
  max-height: 400px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 26px;
  color: #3E4373;
}
.content-file {
  display: flex;
  margin-top: 24px;
}
.content-file-bd {
  margin-left: 20px;
}
.file-name {
  line-height: 24px;
  cursor: pointer;
  color: #FF2E42;
}
</style>
